import FormRender, { useForm } from '@sei/suid-form-render-mobile';
import { Button, Dialog, InputNumber } from '@sei/suid-mobile';
import React from 'react';

export default () => {
  const form = useForm();

  const schema = {
    type: 'object',
    properties: {
      name: {
        title: '姓名',
        type: 'string',
        widget: 'input',
        readOnlyWidget: 'readOnlyWidget',
        placeholder: '请输入姓名',
        rules: [
          {
            required: true,
            message: '姓名不能为空',
          },
        ],
        required: true,
      },
      age: {
        title: '年龄',
        type: 'number',
        widget: 'inputNumber',
        readOnlyWidget: 'readOnlyWidget',
        placeholder: '请输入年龄',
        precision: 0,
        rules: [],
      },
      'list_A3:C3': {
        title: '必填明细表',
        type: 'array',
        widget: 'table',
        items: {
          type: 'object',
          widget: 'card',
          properties: {
            test_date: {
              title: '周期',
              type: 'string',
              widget: 'datePicker',
              readOnlyWidget: 'readOnlyWidget',
              required: true,
              rules: [
                {
                  required: true,
                  message: '周期不能为空',
                },
              ],
            },
            remark: {
              title: '工作内容',
              type: 'string',
              widget: 'textArea',
              readOnlyWidget: 'readOnlyWidget',
              placeholder: '请输入工作内容',
              rules: [
                {
                  required: true,
                  message: '工作内容不能为空',
                },
              ],
              required: true,
            },
            fsdfsfd: {
              title: '完整情况',
              type: 'string',
              widget: 'textArea',
              readOnlyWidget: 'readOnlyWidget',
              placeholder: '请输入完整情况',
              rules: [
                {
                  max: 200,
                  message: '完整情况长度不能超过200个字符',
                },
              ],
            },
          },
        },
      },
    },
  };

  // ... existing code ...
  const handleSubmit = () => {
    // Dialog.alert({
    //   content: <pre>{JSON.stringify(formData, null, 2)}</pre>,
    // });

    // 使用递归验证选项验证当前可见的字段
    form
      .validateFields([], { recursive: true })
      .then((values) => {
        // 验证通过后执行保存回调
        Dialog.alert({
          content: <pre>{JSON.stringify(values, null, 2)}</pre>,
        });
      })
      .catch((error) => {
        // 验证失败，显示错误信息弹窗
        const errorMessages = error.errorFields
          .filter((field: any) => field.errors && field.errors.length > 0)
          .map((field: any) => {
            // 获取错误信息
            const fieldErrors = field.errors.join('\n');
            return `${fieldErrors}`;
          });

        if (errorMessages.length > 0) {
          Dialog.alert({
            content: (
              <div>
                {errorMessages.map((msg: string, index: number) => (
                  <div key={index} style={{ marginBottom: '8px' }}>
                    {msg.split('\n').map((line: string, lineIndex: number) => (
                      <div key={lineIndex}>{line}</div>
                    ))}
                  </div>
                ))}
              </div>
            ),
            confirmText: '确定',
          });
        }
      });
  };

  const initialValues = {
    'list_A3:C3': [
      {
        id: '93cd2a92-a7db-4c9e-828a-0032a143efbb',
        fill_task_id: '1773EE56-7E37-11F0-B6F2-0242C0A84420',
        fill_task_org_id: 'AE8BAA14-23C6-11EF-9CD4-A6D861F480CF',
        fill_task_org_code: 'RCSIT',
        fill_task_org_name: '四川长虹电器股份有限公司',
        fill_template_id: '6F1A8B2D-7E27-11F0-B6F2-0242C0A84420',
        fill_template_version_id: 'C21EAE10-7E27-11F0-B6F2-0242C0A84420',
        fill_template_sheet_id: 'C38E43A2-7E27-11F0-B6F2-0242C0A84420',
        fill_template_work_area_id: 'C39177F4-7E27-11F0-B6F2-0242C0A84420',
        fill_item_number: 1,
        fill_report_date: '2025-08-22',
        data_status: 'INVALID',
        fill_report_cycle_type: 'NO_CYCLE',
        fill_report_start_date: null,
        fill_report_end_date: null,
        fill_report_data_period: null,
        tenant_code: 'dev7',
        creator_id: 'AEE6C2D3-23C6-11EF-9CD4-A6D861F480CF',
        creator_account: 'admin',
        creator_name: '管理员',
        created_date: '2025-08-21 17:19:40',
        last_editor_id: 'AEE6C2D3-23C6-11EF-9CD4-A6D861F480CF',
        last_editor_account: 'admin',
        last_editor_name: '管理员',
        last_edited_date: '2025-08-22 10:34:53',
        test_date: '2025-08-22',
        remark: '12',
        fsdfsfd: '12',
      },
    ],
    id: '5b804fd0-03b8-40c8-a376-47608b5a0c8a',
    fill_task_id: '1773EE56-7E37-11F0-B6F2-0242C0A84420',
    fill_task_org_id: 'AE8BAA14-23C6-11EF-9CD4-A6D861F480CF',
    fill_task_org_code: 'RCSIT',
    fill_task_org_name: '四川长虹电器股份有限公司',
    fill_template_id: '6F1A8B2D-7E27-11F0-B6F2-0242C0A84420',
    fill_template_version_id: 'C21EAE10-7E27-11F0-B6F2-0242C0A84420',
    fill_template_sheet_id: 'C38E43A2-7E27-11F0-B6F2-0242C0A84420',
    fill_template_work_area_id: null,
    fill_item_number: 0,
    fill_report_date: '2025-08-22',
    data_status: 'INVALID',
    fill_report_cycle_type: 'NO_CYCLE',
    fill_report_start_date: null,
    fill_report_end_date: null,
    fill_report_data_period: null,
    tenant_code: 'dev7',
    creator_id: 'AEE6C2D3-23C6-11EF-9CD4-A6D861F480CF',
    creator_account: 'admin',
    creator_name: '管理员',
    created_date: '2025-08-21 17:19:40',
    last_editor_id: 'AEE6C2D3-23C6-11EF-9CD4-A6D861F480CF',
    last_editor_account: 'admin',
    last_editor_name: '管理员',
    last_edited_date: '2025-08-22 10:34:53',
    name: '1',
    age: null,
  };

  return (
    <FormRender
      style={{ height: '100vh', backgroundColor: '#f5f5f5' }}
      schema={schema}
      form={form}
      readOnly={false}
      initialValues={initialValues}
      tableMode={{
        defaultIndex: 0,
        onSaveCallBack: () => {
          // console.log(" ~ -----(tableList.tsx:434) formData", formData);
        },
      }}
      widgets={{
        inputNumber: InputNumber,
      }}
      footer={
        <Button
          block
          type="submit"
          color="primary"
          size="large"
          onClick={handleSubmit}
        >
          提交
        </Button>
      }
    />
  );
};
